<template>
<div class="app-container">
  <el-table
    height="550px"
    :data="tableData"
    border
    fit
    highlight-current-row>
    <el-table-column align="center" label="#" width="95">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
    </el-table-column>
    <el-table-column label="权限名称" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.authName }}
        </template>
      </el-table-column>
    <el-table-column label="权限标识" width="300" align="center">
    <template slot-scope="scope">
        {{ scope.row.perms }}
    </template>
    </el-table-column>
    <el-table-column label="路径" width="300" align="center">
    <template slot-scope="scope">
        {{ scope.row.path }}
    </template>
    </el-table-column>
    <el-table-column label="层级" width="100" align="center">
    <template slot-scope="scope">
        <el-tag :type="scope.row.level | typeFilter">
           {{scope.row.level | levelFilter}}
        </el-tag>
    </template>
    </el-table-column>
    
  </el-table>
</div>
</template>

<script>
import {getAllUserAuth} from '@/api/auth'
  export default {
    name:'auth',
    data() {
      return {
        tableData: []
      }
    },
    created(){
        this.getAllUserAuth()
    },
    filters:{
        levelFilter(value){
            switch(value) {
            case 1:
                return "一级"
                break;
            case 2:
                return "二级"
                break;
            case 3:
                return "三级"
                break;
            default:
                return "XXX"
            } 
        },
        typeFilter(value){
            const statusMap = {
                1: 'success',
                2: 'warning',
                3: 'info'
            }
            return statusMap[value]
        }
    },
    methods:{
        getAllUserAuth(){
            getAllUserAuth().then((response)=>{
                this.tableData = response.data
            })
        }
    }
  }
</script>